<template>
	<view class="container">
		<u-navbar title="圈子">
			<u-icon name="plus-circle" slot="right" v-on:click="navigatePublishring()"></u-icon>
		</u-navbar>
		<u-tabs-swiper ref="ringtabs" :list="tabslist" gutter="288" active-color="rgba(255, 158, 93, 1)" :bold="false" v-on:change="changeTabcurrent"></u-tabs-swiper>
		<swiper :current="tabcurrent" @transition="transition" @animationfinish="animationfinish" :style="{height:scrollviewHeight+'rpx'}">
			<swiper-item v-for="(item,index) in tabslist" :key="index">
				<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx',width:'100%'}">
					<view class="ringtrends" :class="{'lasttrends':trendsindex==trendstexts.length-1}"v-for="(trendsitem,trendsindex) in trendstexts" :key="">
						<view class="publisher">
							<u-avatar src="../../../static/avatar.jpg" :show-sex="true" sex-icon="man"></u-avatar>
							<text>李海</text>
						</view>
						<view class="trendstext">
							<text>{{showtrendsText(trendsindex)}}</text>
							<text class="showall" v-on:click="showAlltexts(trendsindex)" v-if="!isShowall[trendsindex]">展开</text>
						</view>
						<view class="trendsimages" :class="{'oneimg':trendsitem.images.length==1,'twoimg':trendsitem.images.length==2,'moreimg':trendsitem.images.length>2}">
							<image :src="trendsimage" mode="" v-for="(trendsimage,imagesindex) in trendsitem.images" v-on:click="previewImages(trendsindex,imagesindex)"></image>
						</view>
						<view class="trendsbtns">
							<view class="btnitem firstbtn">
								<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
								<text>87</text>
							</view>
							<view class="btnitem" v-on:click="openTrendscommitsList()">
								<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
								<text>125</text>
							</view>
							<view class="btnitem" v-on:click="shareThistrends(trendsindex)">
								<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
								<text>分享</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 圈子动态评论列表 弹出层 -->
		<u-popup v-model="showTrendscommitsList" mode="bottom" border-radius="20" :closeable="true" height="auto" close-icon-pos="top-left">
			<text class="commitslist-title">全部评论23条</text>
			<view class="commitslist">
				<scroll-view scroll-y="true" :style="{height:800+'upx',width:'100%',paddingBottom:'20upx'}">
					<view class="commititem" v-for="commititem in 2">
						<!-- 评论信息 -->
						<view class="commitinfo">
							<u-avatar src="/static/avatar.jpg" size="100"></u-avatar>
							<view class="commits">
								<view class="commit-user-dz">
									<text class="commit-user">李三</text>
									<view class="commitdz">
										<text>99+</text>
										<u-icon name="heart" size="30"></u-icon>
									</view>
								</view>
								<view style="width: 100%;">
									<text class="commit-time">2020-09-04</text>
									<text class="commit-text">请问这是哪家的装修设计啊，厉害风格！请问这是哪家的装修设计啊，厉害风格！</text>
								</view>
								<!-- 评论回复 -->
								<view class="replys" v-for="replyitem in 2">
									<u-avatar src="/static/avatar.jpg"  size="70"></u-avatar>
									<view class="replayinfo">
										<view class="replys-user-dz">
											<text class="commit-user">李三</text>
											<view class="commitdz">
												<text>99+</text>
												<u-icon name="heart" size="30"></u-icon>
											</view>
										</view>
										<view style="width: 100%;">
											<text class="commit-time">2020-09-04</text>
											<text class="commit-text">请问这是哪家的装修设计啊，厉害风格！请问这是哪家的装修设计啊，厉害风格！</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="sendcommits">
				<textarea placeholder="我来说两句" maxlength="-1"/>
				<view class="sendbtn">
					<text>发送</text>
				</view>
			</view>
		</u-popup>
		<!-- 动态分享 弹出层 -->
		<u-popup v-model="showSharemodal" border-radius="20" mode="bottom">
			<view class="shareprovides">
				<view class="provideitem" v-for="provideitem in shareProvides" :key="provideitem.provide">
					<view class="provideicon">
						<image :src="provideitem.icon" mode=""></image>
					</view>
					<text>{{provideitem.name}}</text>
				</view>
			</view>
			<view class="cancelshare" v-on:click="closeSharemodal()">
				<text>取消</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '用户圈'
				}, {
					name: '工匠圈'
				}],
				tabcurrent:0,
				scrollviewHeight:0,
				strLength:80,
				//模拟数据 动态文本
				trendstexts:[
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['../../../static/=0.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['../../../static/=0.jpg','../../../static/=0.jpg']
					},
					{
						text:'新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。',
						images:['../../../static/=0.jpg','../../../static/=0.jpg','../../../static/=0.jpg']
					}
				],
			    isShowall:[false,false,false],
				showTrendscommitsList:false,
				showSharemodal:false,
				shareProvides:[{
					provide:'weixin',
					icon:'/static/weixin.png',
					name:'微信好友'
				},{
					provide:'friendsring',
					icon:'/static/friendring.png',
					name:'朋友圈'
				},{
					provide:'qq',
					icon:'/static/qq.png',
					name:'QQ'
				},{
					provide:'weibo',
					icon:'/static/weibo.png',
					name:'新浪微博'
				}]
			}
		},
		onLoad(){
			const windowHeight=uni.getSystemInfoSync().windowHeight-45;
			this.scrollviewHeight=windowHeight/(uni.upx2px(windowHeight)/windowHeight)-100;
			// uni.getProvider({
			// 	service:"share",
			// 	success: (res_provides) => {
			// 		console.log(res_provides)
			// 	}
			// })
		},
		methods: {
			changeTabcurrent(index){
				this.tabcurrent=index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.ringtabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.ringtabs.setFinishCurrent(current);
				this.tabcurrent = current;
			},
			//展开动态文本
			showAlltexts(index){
                  this.$set(this.isShowall,index,true);
			},
			//预览图片
			previewImages(trendsindex,imagesindex){
				const that=this;
				console.log(trendsindex,imagesindex)
				uni.previewImage({
					current:imagesindex,
					urls:that.trendstexts[trendsindex].images,
					indicator:"default"
				})
			},
			//打开动态评论列表弹出层
			openTrendscommitsList(){
				this.showTrendscommitsList=true;
			},
			//打开分享弹框
			shareThistrends(){
				this.showSharemodal=true;
			},
			closeSharemodal(){
				this.showSharemodal=false;
			},
			navigatePublishring(){
				uni.navigateTo({
					url:'/pages/index/socialring/publishring/publishring'
				})
			}
		},
		computed:{
			showtrendsText(){
				// const that=this;
				 return (index)=>{
					 if(this.isShowall[index] || this.trendstexts[index].text.length<=80)
					 {
						 // this.$set(this.isShowall,index,true);
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.trendstexts[index].text;
					 }else{
						 return this.trendstexts[index].text.substr(0,79)+'...'
					 }
				 }
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 min-height: 100%;
		 background-color: rgba(244, 248, 251, 1);
		 swiper{
			 width: 100%;
			 margin-top: 20rpx;
			 background-color: #FFFFFF;
		 }
		 .ringtrends{
			 width: 690upx;
			 height: auto;
			 margin: auto;
			 padding-bottom: 30upx;
			 border-bottom: 1upx solid rgba(227, 227, 227, 1);
			 padding-top: 30upx;
			 .publisher{
			    width: 100%;
				display: flex;
				align-items: center;
				text{margin-left: 20upx;font-size: 30upx;}
			}
			.trendstext{
				font-size: 28upx;
				word-break: break-all;
				margin-top: 30upx;
			}
			.showall{color: #2979FF;}
			.trendsimages{width: 100%;height:auto;margin-top: 30upx;display: flex;flex-wrap: wrap;justify-content: space-between;}
			.oneimg image{
				width: 280upx;
				height: 500upx;
			}
			.twoimg image{
				width: 335upx;
				height: 250upx;
			}
			.moreimg image{
				width: 220upx;
				height: 235upx;
			}
			.trendsbtns{
				width: 100%;
				margin-top: 30upx;
				display: flex;
				align-items: center;
			}
			.btnitem{
				margin-left: 30upx;
				display: flex;
				align-items: center;
				text{margin-left: 10upx;color: rgba(136, 136, 136, 1);}
			}
			.firstbtn{
				margin-left: 0upx;
			}
		 }
		 .lasttrends{
			 border: none;
		 }

		 .commitslist-title{
			 font-size: 30upx;
			 font-weight: bold;
			 display: block;
			 width: 100%;
			 text-align: center;
			 line-height: 80upx;
		 }
		 .commitslist{
			 width: 690upx;
			 margin:auto;
			 height: auto;
			 .commititem{
				 width: 100%;
				 height: auto;
				 margin-top: 30upx;
			 }
			 .commitinfo{
				 width: 100%;
				 height: auto;
				 display: flex;
				 flex-wrap: wrap;
			 }
			 .commits{
				width: 570rpx;
				text{
					display: block;
					word-break: break-all;
				}
				margin-left: 20rpx;
			}
			.commit-time{
				font-size: 25upx;
				color: rgba(136, 136, 136, 1);
				margin-top: 15upx;
			}
		    .commit-text{
				font-size: 28upx;
				margin-top: 15upx;
				color: rgba(34, 34, 34, 1);
			}
			.commitdz{
				display: flex;
				align-items: center;
			}
			 .commit-user-dz{
				 display: flex;
				 width: 100%;
				 justify-content: space-between;
				 font-size: 30upx;
				 color: rgba(136, 136, 136, 1);
			 }
		 }
		 .sendcommits{
			 width: 690upx;
			 height: auto;
			 margin: auto;
			 margin-bottom: 15upx;
			 display: flex;
			 textarea{
				 font-size: 28upx;
				 padding: 15upx;
				 background-color: #fff;
				 width: 580upx;
				 min-height: 60upx;
				 max-height: 150upx;
			 }
			 
			 align-items: center;
			 .sendbtn{
				 font-size: 28upx;
				 color: rgba(136, 136, 136, 1);
				 margin-left: 20upx;
			 }
		 }
		 .replys{
			 display: flex;
			 flex: 1;
			 flex-wrap: wrap;
			 width: 100%;
			 text{
				 display: block;
			 	word-break: break-all;
			 }
			 margin-top: 10rpx;
		 }
		 .replys-user-dz{
			 width: 100%;
			 display: flex;
			 flex: 1;
			 justify-content: space-between;
			 font-size: 30upx;
			 color: rgba(136, 136, 136, 1);
		 }
		 .replayinfo{
			 display:flex;
			 flex: 1;
			 width: 100%;
			 margin-left: 10rpx;
			 flex-wrap: wrap;
		 }
		 .cancelshare{
			 width: 100%;
			 height: 80upx;
			 background-color: #FFFFFF;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 font-size: 30upx;
		 }
		 .shareprovides{
		     width: 680upx;
			 height: auto;
			 padding-top: 120upx;
			 padding-bottom: 150upx;
			 margin: auto;
			 display: flex;
			 justify-content: space-between;
			 .provideitem{
				 width: 120upx;
				 height: auto;
				 display: flex;
				 flex-wrap:wrap;
				 justify-content: center;
				 text{
				 		color: rgba(34, 34, 34, 1);
				 		margin-top: 20upx;
				 		font-size: 28upx;
				 }
			 }
		 }
		 .provideicon{
			 width: 120upx;
			 height: 120upx;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 border-radius: 100%;
			 background-color: #FFFFFF;
			 image{
				 width: 70upx;
				 height: 70upx;
			 }
		 }
	 }
</style>
